<template>
	<div class="zh-transaction-log">
		<nav-header>
            <template slot="menuBefore">
				<li><router-link to="/user/studystatus/transaction-record" tag="a">异动记录</router-link></li>
				<li class="gap">&gt;</li>
			</template>
            <li>记录</li>
        </nav-header>

        <div class="transaction-log-name">
            <span>{{userAccount.name}}</span>
            <span>{{'（' + userAccount.number + '）'}}</span>
        </div>

		<div class="zh-table">
			<div class="zh-table-open clear">
				<!-- <div class="zh-open-left fl">
					<div class="open-width" style="width: 150px">
						<el-select v-model="changeTypeId" filterable placeholder="请选择变更类型">
						    <el-option
						      v-for="item in changeType"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
                    <div class="open-width" style="width: 130px">
						<el-select v-model="stateId" filterable placeholder="请选择状态">
						    <el-option
						      v-for="item in stateList"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
					<el-button type="primary" @click="getList">搜索</el-button>
					<el-button type="primary" @click="resetList">重置</el-button>
				</div> -->

				<div class="zh-open-right fr">
					<el-button type="primary" @click="exportSelect('all')">导出所选</el-button>
                    <el-button type="danger" @click="deleteSelete">批量删除</el-button>
				</div>
			</div>

			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<el-table
				    :data="logList"
				    border
				    @selection-change="tableSelectionChange"
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
                      :selectable="checkSelectable"
				      align="center"
                      fixed>
				    </el-table-column>
				    <el-table-column
                        prop=""
                        label="变更类型"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.update_type === 1 ? '数据变更' : (scope.row.update_type === 2 ? '状态变更' : '异动变更')}}
			      	    </template>
				    </el-table-column>
                    <el-table-column
                        prop=""
                        label="操作员"
                        align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.create_name ? scope.row.create_name : '--'}}
			      	    </template>
				    </el-table-column>
                    <el-table-column
                        prop="change_string"
                        label="操作记录"
                        align="center"
                        show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="create_time"
				      label="操作时间"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="create_time"
				      label="生效时间"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="status_string"
				      label="状态"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="操作"
				      align="center"
                      width="200"
				      show-overflow-tooltip>
				      	<template slot-scope="scope">
                            <el-button v-if="scope.row.field_string != -1" @click="exportSelect(scope.row.id)" type="text">导出</el-button>
			      	        <el-button @click="deleteRow(scope.row.id)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>

				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="logParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="logParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  	export default {
	    data() {
		    return {
		    	loading:{
					status:false,
					txt:'获取数据...',
                },
                stateId: null,
                changeTypeId: null,
                changeType:[],
                stateList: [],
	        	selected:[],
                logParam: {
                    user_id: this.$route.params.id,
                    update_type: 3,
					page_size: 10,
					page_index: 1,
				},
				total_number: 0,
				logList:[],
                rowLen: 0,
                userAccount: {
                    number: '',
                    name: ''
                }
		    }
		},
		created(){
            this.getList();
            this.getUserName();
		},
		methods: {
             /**
             * 根据条件是否可选
             */
            checkSelectable(row) {
                if (row.field_string != '-1') {
                    return true;
                }
                
                return false;
            },
            /**
             * 获取用户的姓名和账号
             */
            getUserName() {
            	let success = (res=>{
            		this.userAccount = res.data;
            	})
                
                this.$ajax.get('api/studystatus/get_name_by_id', {params: {id: this.$route.params.id}, func: {success: success}});
            },
            /**
             * 导出选中的记录
             * @param {Number} id 当前记录 id
             */
			exportSelect(id){
                if (id == 'all') {
                    if(this.logList.length === 0 || this.selected.length === 0){
                        this.$message.warning("导出的数据为空！")
                        return false;
                    }
                }

                let _id = [];
                if (id == 'all') {
                    this.selected.forEach(item => {
                        _id.push(item.id);
                    })
                } else {
                    _id.push(id);
                }

                let params = {
                    id: _id,
                    user_id: this.$route.params.id,
                    update_type: this.logParam.update_type
                }

                this.export_excel('api/studystatus/download_studystatus_history', params, '记录');
            },
            /**
             * 重置筛选条件
             */
			resetList() {
                this.logParam.page_index = 1;
                this.logParam.page_size = 10;
                
				this.getList();
            },
            /**
             * 获取变更记录
             */
			getList(){
                this.loading.status = true;
		    	
				let success = (res => {
					this.loading.status =  false
					this.logList = res.data.data;
					this.total_number = res.data.data_sum;
                });
                
  				this.$ajax.get('api/studystatus/get_studystatus_history', {params: this.logParam, func: {success: success}});
            },
            /**
             * 选中记录
             * @param {Array} val 选中的id
             */
		    tableSelectionChange(val) {
                this.selected = val;
            },
            /**
             * 删除数据
             * @param {String || Array} param 删除数据的 id
             */
            deleteData(param) {
                this.loading.status = true;
		    	
				let success = (res => {
                    this.$message.success(res.msg);

                    if (this.logList.length - this.rowLen === 0) {
                        if (this.logParam.page_index > 1) {
                            this.logParam.page_index-- ;
                        } else {
                            this.logParam.page_index = 1;
                        }
                    }

                    this.getList();
                });
                let fail = (res => {
                    this.loading.status = false;
                    this.$message.error(res.msg);
                })
                
  				this.$ajax.delete('api/studystatus/delete_history', {params: {id: param}, func: {success: success, fail: fail}});
            },
            /**
             * 删除记录
             * @param {Number} id 记录id
             */
            deleteRow(id){
				let yes = (res => {
                    this.rowLen = 1;
                    this.deleteData(id);
				})
                let cancel = (res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '是否删除该条记录？'});
            },
            /**
             * 批量删除
             */
	      	deleteSelete(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
                }
                
				let yes = (res => {
                    this.rowLen = this.selected.length;
                    
                    let arr = [];
                    this.selected.forEach(item => {
                        arr.push(item.id);
                    })

                    this.deleteData(arr);
				})
                let cancel = (res => {})
                
				this.e_confirm({yes: yes, cancel: cancel, txt: '确定要批量删除选中的项吗？'});
			},
		    handleSizeChange(val) {
		     	this.logParam.page_index = 1;
		    	this.logParam.page_size = val;
		    	this.getList();
		    },
		    handleCurrentChange(val) {
		    	this.logParam.page_index = val;
		    	this.getList();
		    },
		},
  	}
</script>
<style lang="scss">
	.zh-transaction-log {
		.transaction-log-name {
            margin-bottom: 25px;
            font-size: 18px;

            >span:last-child {
                font-size: 14px;
                color: #7C7C7C;
            }
        }
	}
</style>